<template>
    <el-scrollbar v-if="datas.length" ref="myScrollbar" class="cpc-list-items">
        <ul>
            <li v-for="(itemData) in datas" :key="itemData.id">
                <p  class="row-title">{{ itemData.title }}</p>
                <ul class="row-box">
                    <li
                        v-for="item in itemData.lists"
                        :id="item.value"
                        :key="item.value"
                        class="column-box"
                        @click="detailCodeEdit(item.value)"
                    >
                        <img :src="item.img" />
                        <p>{{ item.title }}</p>
                    </li>
                </ul>
            </li>
        </ul>
    </el-scrollbar>
    <div v-else class="no-data">暂无数据</div>
</template>
  
  <script lang="ts">
import { ref, reactive, defineComponent } from 'vue'
import { useRoute } from "vue-router";
import menuChild from './menuChild.vue'
export default defineComponent({
    name: 'cpcMenu',
    components: { menuChild },
    props: {
        datas: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        //根据id,飞到指定的位置
        AnchorLinkTo(id: string) {
            const offsetTop = document.getElementById(id)?.offsetTop;
            (this.$refs.myScrollbar as any).wrap.scrollTop = offsetTop;

        },
        //详情点击，打开新窗口（代码编辑器）
        detailCodeEdit(example: string) {
            const config = {
                path: "/Editor",
                query: {
                    example: example
                }
            };
            const router = (this as any).$router;
            let routeData = router.resolve(config);
            window.open(routeData.href, '_blank');
        }
    }
})
</script>
  
<style scoped lang="less">
@import url("@/styles/var.less");
.cpc-list-items {
    background-color: @cr-bgc-base;
    padding: 0.2rem 0;
    .row-title {
        font-size: 0.2rem;
        padding: 0.2rem;
        font-weight: 800;
        border-top: 0.01rem dashed @cr-border-base;
        border-bottom: 0.01rem dashed @cr-border-base;
    }
    .row-box {
        padding: 0.3rem 0 0 0.3rem;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        .column-box {
            margin: 0 0.3rem 0.3rem 0;
            cursor: pointer;
            border-radius: 0.05rem;
            width: 2rem;
            height: 2rem;
            box-sizing: border-box;
            padding: 0.05rem;
            transition: 300ms;
            border: 0.01rem solid @cr-border-base;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            &:hover {
                box-shadow: 0 0.02rem 0.05rem 0 @cr-border-base;
            }
            > img {
                width: 100%;
                height: 100%;
            }
            > p {
                padding-top: 0.05rem;
                font-size: 0.16rem;
            }
        }
    }
}
.no-data{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
</style>
  